import PreviewLayout from '@/components/DataPreview/layout';

import React, { useEffect, useState } from 'react';
import { IAssignTask } from '@/ts/core/work/assign';
import Assign from '.';

interface AssignLayoutType {
  current: IAssignTask;
}
const actions = [
  {
    key: 'workdetails',
    label: `办事详情`,
  },
  {
    key: 'flowdetails',
    label: `流程跟踪`,
  },
];

const AssignLayout: React.FC<AssignLayoutType> = ({ current }) => {
  const [selectItem, setSelectItem] = useState<any>({
    key: 'workdetails',
    label: `办事详情`,
  });
  useEffect(() => {
    onTreeSelected(current);
  }, []);
  const loadActionItems = (entity: IAssignTask) => {
    /** tab标签页 */
    const items = [
      {
        key: 'workdetails',
        label: `办事详情`,
      },
    ];
    if (entity.metadata.instanceId) {
      items.push({
        key: 'flowdetails',
        label: `流程跟踪`,
      });
    }

    return items;
  };
  const onTreeSelected = (entity: IAssignTask) => {
    const _actions = loadActionItems(entity);
    if (_actions.length == 1) {
      onActionChange(_actions[0].key);
    }
    current.changCallback('action', current.typeName, _actions);
  };
  const onActionChange = (key: React.Key) => {
    setSelectItem(actions.find((i) => i.key == key));
    current.changCallback('actionChange', current.typeName, key);
  };

  return (
    <div style={{ height: '100%' }}>
      <PreviewLayout
        entity={current}
        actions={[]}
        selectKey={selectItem.key}
        onActionChanged={onActionChange}>
        <Assign key={current.key} assignTask={current} onTreeSelected={onTreeSelected} />
      </PreviewLayout>
    </div>
  );
};

export default AssignLayout;
